<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../avalon.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css" />
        <style>
            body{
                font-size:13px;
            }
            .drag{
                width:100px;
                height:100px;
                background: green;
                position: absolute;
            }
            .ui-slider-vertical{
                float:left;
                margin-right:3em;
            }
        </style>
        <script>

            require("avalon.slider", function() {
                var model = avalon.define("theme", function(vm) {
                    vm.theme = "start";
                    vm.percent = 0
                })
                var id = setInterval(function() {
                    if (model.percent < 100) {
                        model.percent++
                    } else {
                        clearInterval(id)
                    }
                }, 100)
                avalon.scan()
            })
        </script>
    </head>
    <body>
        <div style="width:70%">
            <input ms-widget="slider,aaa"  data-slider-max="255" data-slider-value="36">
        </div>
        <p>想禁止拖动，可以为原input元素设置disabled属性</p>
        <div style="width:70%">
            <input ms-widget="slider" disabled data-slider-max="255" data-slider-value="36">
        </div>

        <p ms-controller="aaa">值为{{value}}，百分比为{{percent}}%</p>
        <div style="width:70%">
            <input ms-widget="slider" data-slider-slider-range="min">
        </div>
        <br/>
        <div style="width:70%">
            <p>固定最大值</p>
            <input ms-widget="slider" data-slider-range="max"  data-slider-max="10" data-slider-value="2">
            <p>固定值小值</p>
            <input  ms-widget="slider" data-slider-min="1" data-slider-max="700" data-slider-value="37" data-slider-range="min"/>
            <p>只有拖动了一定距离才同步数据</p>
            <input  ms-widget="slider" data-slider-min="0" data-slider-max="500" data-slider-value="100" data-slider-step="50" />
            <br/>
        </div>
        <div style="width:70%">
            <input ms-widget="slider,bbb" data-slider-range="true" data-slider-values="[ 25,50 ]" data-slider-max="100">
            <p ms-controller="bbb">
                这是分开写的： {{ percent0 }}  {{ percent1 }}<br/>这是并在一起的  {{ value }}</p>
        </div>
        <div style="height:200px">
            <input  ms-widget="slider,ccc"  data-slider-value="20" data-slider-range="min" data-slider-orientation="vertical" >
            <input  ms-widget="slider"  data-slider-value="40" data-slider-range="min" data-slider-orientation="vertical" >
            <input  ms-widget="slider"  data-slider-value="60" data-slider-range="min" data-slider-orientation="vertical" >
            <input  ms-widget="slider"  data-slider-value="80" data-slider-range="min" data-slider-orientation="vertical" >
            <input  ms-widget="slider,ddd"  data-slider-values="[20,80]" data-slider-range="true" data-slider-orientation="vertical" >
            <input  ms-widget="slider"  data-slider-value="60" data-slider-range="max" data-slider-orientation="vertical" >
        </div>  
        <p ms-controller="ccc">{{ value }}</p>
        <p ms-controller="ddd">{{ value }}</p>
        <div style="width:70%">
            <input ms-widget="slider,eee"  data-slider-range="true" data-slider-values="[ 25,50 ]" data-slider-max="100">
            <p ms-controller="eee">{{ percent0 }}  {{ percent1 }}</p>
        </div>
        <div ms-controller="theme">
            <link rel="stylesheet" ms-href="http://code.jquery.com/ui/1.10.3/themes/{{theme}}/jquery-ui.css" />
            <select ms-duplex="theme">
                <option value='start'>start</option>
                <option value='smoothness'>smoothness</option>
                <option value='flick'>flick</option>
                <option value='sunny'>sunny</option>
                <option value='excite-bike'>excite bike</option>
                <option value='black-tie'>black tie</option>
                <option value='trontastic'>trontastic</option>
                <option value='swanky-purse'>swanky purse</option>
                <option value='le-frog'>le frog</option>
                <option value='blitzer'>blitzer</option>
                <option value='dot-luv'>dot luv</option>
                <option value='mint-choc'>mint-choc</option>
                <option value='hot-sneaks'>hot sneaks</option>
                <option value='south-street'> south street</option>
                <option value='humanity'>humanity</option>
                <option value='vader'>vader</option>
                <option value='eggplant'>eggplant</option>
                <option value='cupertino'>cupertino</option>
                <option value='overcast'>overcast</option>
            </select>你喜欢的皮肤

        </div>
    </body>
</html>
